import Base from '@/components/Base';
import {
  Button,
  Card,
  Form,
  Radio,
  Input,
  Badge,
  Select,
  Table,
  Modal,
  message,
  Popover,
} from 'antd';
import { KayButton, View, Text } from '@/components/KayUI';
import ColorSelector from '@/components/Color/Selector';
import styles from './index.less';

interface State {
  currentHsl: {
    H: number; //色相   0-360
    S: number; //饱和度 0-100
    L: number; //亮度   0-100
  };
}

export default class Index extends Base<any, State> {
  public state: State = {
    currentHsl: {
      H: 210,
      S: 88,
      L: 30,
    },
  };

  public async didShow() {}

  public async didMount() {
    // console.log('history', this.navigator.history)
    this.randomColor();
  }

  public render() {
    const { currentHsl } = this.state;
    return (
      <View>
        <View className={styles.topColor}>
          <View className={styles.abInner}>
            <View className={styles.rowStrretch} style={{ flex: 1 }}>
              <View
                className={styles.radius10}
                style={{ flex: 6, backgroundColor: this.currentColor() }}
              />
              <View style={{ flex: 3 }}>
                <View className={styles.rowStrretch} style={{ flex: 1 }}>
                  <View
                    className={styles.radius10}
                    style={{
                      flex: 2,
                      backgroundColor: this.currentColor().darken(0.3),
                    }}
                  />
                  <View
                    className={styles.radius10}
                    style={{
                      flex: 1,
                      backgroundColor: this.currentColor().darken(0.6),
                    }}
                  />
                </View>
                <View className={styles.rowStrretch} style={{ flex: 1 }}>
                  <View
                    className={styles.radius99}
                    style={{
                      flex: 1,
                      backgroundColor: this.currentColor()
                        .rotate(-5)
                        .desaturate(0.4),
                    }}
                  />
                  <View
                    className={styles.radius99}
                    style={{
                      flex: 1,
                      backgroundColor: this.currentColor()
                        .rotate(15)
                        .lighten(0.3),
                    }}
                  />
                  <View
                    className={styles.radius99}
                    style={{
                      flex: 1,
                      backgroundColor: this.currentColor().fade(0.3).rotate(30),
                    }}
                  />
                  <View
                    className={styles.radius99}
                    style={{
                      flex: 1,
                      backgroundColor: this.currentColor().mix(
                        this.currentColor().rotate(100),
                      ),
                    }}
                  />
                  <View
                    className={styles.radius99}
                    style={{
                      flex: 1,
                      // backgroundColor: this.interface.Color.rgb(155, 55, 255).lighten(0.5)
                      backgroundColor: this.currentColor().mix(
                        this.currentColor().rotate(180),
                        0.3,
                      ),
                    }}
                  />
                </View>
              </View>
            </View>
          </View>
          <View className={styles.rowCenter}>
            <View
              className={styles.radius10}
              style={{
                flex: 8,
                height: 320,
                // backgroundColor: this.interface.Color.rgb(155, 55, 255).lighten(0.5)
                backgroundColor: this.currentColor().fade(0.7),
              }}
            ></View>
          </View>
        </View>
        <View className={styles.selBox}>
          <ColorSelector
            style={{
              width: 300,
            }}
            onColorChange={(e) => {
              this.setState({
                currentHsl: e.hsl,
              });
            }}
            value={{ hsl: [currentHsl.H, currentHsl.S, currentHsl.L] }}
          ></ColorSelector>
          <View className={styles.selR}>
            <View className={styles.rowCenter}>
              <Text type="h2">←</Text>
              <View>
                <Text type="small"> · 叠加了三个颜色层，最底下是基础颜色</Text>
                <Text type="small">
                  {' '}
                  · 第二层是从左到右的白色到透明的渐变，模拟S饱和度
                </Text>
                <Text type="small">
                  {' '}
                  · 第三层是从下到上的黑色到透明的渐变，模拟L明度
                </Text>
                <Text type="small"> - </Text>
                <Text type="small"> · S饱和度：X轴0-100控制</Text>
                <Text type="small">
                  {' '}
                  · L明度：XY轴组合控制，左上角100，右上角50，底部都是0
                </Text>
              </View>
            </View>
          </View>
        </View>
        <View style={{ margin: '20px 0', alignItems: 'flex-start' }}>
          <Button type="primary" onClick={this.randomColor}>
            随机一个颜色
          </Button>
        </View>
        <Text>RGB（Red, Green, Blue，范围都在0-255</Text>
        <Text>HEX 就是将RGB三个数值转成16进制，即使用‘00’~‘ff’代表0~255</Text>
        <Text>
          HSL表示色相（Hue）、饱和度（Saturation）、亮度（Lightness）。结构是：hsl(hue,
          saturation%, lightness%)。其中饱和度和亮度是百分比。
        </Text>
        <Text>H: 0 ~ 360</Text>
        <Text>S: 0% ~ 100%</Text>
        <Text>L: 0% ~ 100%</Text>
      </View>
    );
  }

  private currentColor = () => {
    const { currentHsl } = this.state;
    return this.interface.Color(
      'hsl(' + currentHsl.H + ' ' + currentHsl.S + '% ' + currentHsl.L + '%)',
    );
  };
  private currentColorLuminos = () => {
    const { currentHsl } = this.state;
    return this.interface
      .Color(
        'hsl(' + currentHsl.H + ' ' + currentHsl.S + '% ' + currentHsl.L + '%)',
      )
      .fade(0.5);
  };

  private randomColor = () => {
    // return '#e'+parseInt(String(Math.random()*10))+'c'
    // return 'rgba('+(num*500+30)+','+(num*360+70)+','+(num*400+100)+',1)'
    // return 'hsl(106deg ' + (num * 200 + 30) + '% ' + (num * 150 + 40) + '%)';
    this.setState({
      currentHsl: {
        H: parseInt(String(Math.random() * 360)),
        S: parseInt(String(Math.random() * 50 + 30)),
        L: parseInt(String(Math.random() * 40 + 20)),
      },
    });
  };
}

const Styles = {
  rowItem: {},
};
